<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="${base}/css/common.css">
    <link rel="stylesheet" href="${base}/plugin/bootstrap-3.3.4-dist/css/bootstrap.css" type="text/css" />
    <link rel="stylesheet" href="${base}/plugin/artDialog/css/ui-dialog.css">
    <link rel='stylesheet' href='${base}/plugin/calendarEvents/css/fullcalendar.min.css' type="text/css"  />
    <link rel='stylesheet' href='${base}/plugin/calendarEvents/css/fullcalendar.print.min.css' type="text/css" media='print' />
    <link rel="stylesheet" href="${base}/css/calendar.css" type="text/css"/>
    <title>Document</title>
    <style>
        .fc-body{
            cursor: pointer;
        }
        .calendar-title{
            height: 35px;
            background-color: #0c7ef7;
        }
        .fc-day-header{
            background-color: #e7eef8 !important;
            color: #0e3270;
        }
        .fc-sun,.fc-sat{
            background-color: #f6f6f6;
        }
        .fc td.fc-today {
            /*background-color: #ffffff;*/
            /*border-color: #7aa8f6;*/
        }
        .fc-ltr .fc-basic-view .fc-day-top .fc-day-number{
            text-align: center;
            margin-top: 2px;
            margin-right: 4px;
            width: 20px;
            height: 20px;
        }
        .fc-today .fc-day-number{
            background-color: #4688ff;
            border-radius: 50%;
            color: white;
        }
        .fc-day-grid-event{
            height: 20px;
        }
        .importance0{
            color: #4587ff !important;
            background: #edf3ff;
            border: none;
            border-radius: 0px;
            padding-left: 14px;
            position: relative;
            font-weight: bolder;
        }
        .importance0:before{
            content: "";
            width: 3px;
            height: 100%;
            position: absolute;
            background-color:#4884fe ;
            left: 0px;
        }
        .importance1{
            color: #ffb22c !important;
            background: #fff7ea;
            border: none;
            border-radius: 0px;
            padding-left: 14px;
            font-weight: bolder;
        }
        .importance1:before{
            content: "";
            width: 3px;
            height: 100%;
            position: absolute;
            background-color:#fb9725;
            left: 0px;
        }
        .importance2{
            color: #d10e0e !important;
            background: #ffebeb;
            border: none;
            border-radius: 0px;
            padding-left: 14px;
            font-weight: bolder;
        }
        .importance2:before{
            content: "";
            width: 3px;
            height: 100%;
            position: absolute;
            background-color:#fc6d27;
            left: 0px;
        }
        .finished{
            color: white !important;
            background: grey !important;
            border: none;
            border-radius: 0px;
            padding-left: 14px;
            font-weight: bolder;
        }
        .finished:before{
            content: "";
            width: 3px;
            height: 100%;
            position: absolute;
            background-color:grey !important;
            left: 0px;
        }
        .fc-day-grid-event .fc-content{
            line-height: 20px;
        }
        .fc-day-grid-event .fc-time {
            font-weight: normal;
            color: #a8a7a3;
            vertical-align: middle;
        }
        .fc-day-grid-event .fc-title {
            vertical-align: middle;
        }
        a.fc-more .num{
            color: #4086ff;
        }
        a.fc-more{
            color: #676767;
            text-decoration: none !important;
            border-bottom: 1px solid #bdbbbc;
        }
        .fc-prev-button,.fc-next-button,.fc-prevYear-button,.fc-nextYear-button{
            background-color: white;
            border: none;
            background-image: none;
            color: grey;
            font-weight: normal;
            text-shadow: none;
        }
        .fc-today-button{
            background-color: #8fb7ff;
            border: none;
            background-image: none;
            color: white;
            font-weight: normal;
            text-shadow: none;
        }
        .modal-header{
            padding: 15px 20px 15px 20px;
        }
        .modal-title{
            color: #4687ff;
            font-weight: bolder;
            font-size: 17px;
        }
        modal-content{

        }
        .update .modal-title{
            color: #fb6d25;
        }
        .create:after{
            content: "";
            width: 100%;
            position: absolute;
            height: 2px;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            top: 0px;
            background-color: #4587ff;
        }
        .update:after{
            content: "";
            width: 100%;
            position: absolute;
            height: 2px;
            border-top-left-radius: 2px;
            border-top-right-radius: 2px;
            top: 0px;
            background-color: #fb6d25;
        }
        #commit{
            border: none;
            background-color: #4586ff !important;
            border-color: #f5f5f5 !important;
            border-radius: 0;
            padding: 6px 20px;
        }
        .input-group-addon{
            background-color: white;
            border: none;
            text-align: left;
        }
        textarea{
            background-color: #fff;
            margin-left: 28px;
            text-indent: 14px;
            width: 94%;
            border-radius: 2px;
            border: 1px solid #ccc;
            outline: none;
        }
        textarea:focus{
            border-color: #66afe9;
            box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
        }
        .radio-div.checked .label-radio-icon{
            background-image: url(${base}/images/calendar/checked.png);
            background-position: 0 0;
        }
        .radio-div .label-radio-icon{
            background-image: url(${base}/images/calendar/unchecked.png);
            background-position: 0 0;
        }
        #remove{
            border-radius: 0px;
            border: 0px;
            padding: 6px 20px;
        }
        .fc-header-toolbar .fc-center  h2 {
            display: inline-block;
            vertical-align: middle;
        }
        .fc-header-toolbar .fc-center {
            width: 80%;
        }
        .fc-header-toolbar .fc-center>div {
            float: none;
        }
        .fc-header-toolbar .fc-prev-button,.fc-header-toolbar .fc-next-button {
            margin: 0 5%;
        }
    </style>
</head>
<body>
<div class="calendar">
    <div class="container-right">
        <!--<div class="calendar-title">-->

        <!--</div>-->
        <!--<div class="calendar-box">-->
            <div id='calendar'>

            </div>
        <!--</div>-->
        <!--<footer>-->

        <!--</footer>-->
    </div>
    <div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel"></h4>
                </div>
                <div class="modal-body">
                    <div class="dialog2">
                        <div class="allDay">
                            <div class="checkbox-div">
                                <input class="input-checkbox" type="checkbox" name="" value="" />
                                <span class="checkbox-all label-checkbox-icon"></span>
                                <span>全天</span>
                            </div>
                        </div>
                        <div class="time">
                            <div class="form-group" style="width: 225px;">
                                <div class="input-group">
                                    <span class="input-group-addon boder-left-radius" style="width: 86px;">时间*</span>
                                    <input class="form_datetime form-control" type="text" value="" readonly="readonly" style="background-color: #fff" id="J-xl">
                                </div>
                            </div>
                            <div style="display: inline-block;position: relative;">
                                <input type="text" name="" readonly="readonly" style="background-color: #fff" class="timepicker form-control" id="timepicker1" value="08:00" />
                                <input type="text" name="" readonly="readonly" style="background-color: #fff" class="timepicker form-control" id="timepicker2" value="08:30" />
                            </div>
                        </div>
                        <div class="title">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon boder-left-radius" style="width: 86px;">标题*</span>
                                    <input class="form-control" type="text" value="" name="" style="background-color: #fff">
                                </div>
                            </div>
                        </div>
                        <div class="content">
                            <div class="form-group">
                                <div class="input-group">
                                    <span class="input-group-addon boder-left-radius">内容*</span>
                                    <textarea id="content"  rows="5" cols="60"  value="">
                                    </textarea>
                                </div>
                            </div>
                        </div>
                        <div class="level form-group">
                            <div class="input-group">
                                <span class="input-group-addon">重要程度*</span>
                                <div class="form-control" id="importance_level1">
                                    <div class="radio-div" data-id="0">
                                        <input class="input-radio" type="radio" name="level" value="3" />
                                        <span class="label-radio-icon"></span>
                                        <span class="radio-text">非常重要</span>
                                    </div>
                                    <div class="radio-div" data-id="2">
                                        <input class="input-radio" type="radio" name="level" value="2" />
                                        <span class="label-radio-icon"></span>
                                        <span class="radio-text">一般重要</span>
                                    </div>
                                    <div class="radio-div" data-id="3">
                                        <input class="input-radio" type="radio" name="level" value="0" />
                                        <span class="label-radio-icon"></span>
                                        <span class="radio-text">不重要</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="ornot">
                            <div class="input-group">
                                <span class="input-group-addon">是否完成*</span>
                                <div class="form-control" id="ornot1">
                                    <div class="radio-div" data-id="unfinish">
                                        <input class="input-radio" type="radio" name="ornot" value="0" />
                                        <span class="label-radio-icon"></span>
                                        <span class="radio-text">未完成</span>
                                    </div>
                                    <div class="radio-div" data-id="finish">
                                        <input class="input-radio" type="radio" name="ornot" value="1" />
                                        <span class="label-radio-icon"></span>
                                        <span class="radio-text">已完成</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <!--<button type="button" id="close" class="btn btn-default" data-dismiss="modal">关闭</button>-->
                    <button type="button" id="commit" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="${base}/js/jquery-1.9.1.js" type="text/javascript" ></script>
<script src="${base}/plugin/bootstrap-3.3.4-dist/js/bootstrap.js"></script>
<script src='${base}/plugin/calendarEvents/js/lib/moment.min.js'></script>
<script src='${base}/plugin/calendarEvents/js/fullcalendar.js'></script>
<script src='${base}/plugin/calendarEvents/js/locale/zh-cn.js'></script>
<script src="${base}/plugin/calendarEvents/laydate/laydate.js"></script>
<script type="text/javascript">
    var basePath = "${base}";
</script>
<script src="${base}/js/calendar.js"></script>
<script src="${base}/plugin/artDialog/dist/dialog.js"></script>
<script src="${base}/plugin/topNetAlertMsg/topNetAlretMsg.js"></script>
<script src="${base}/plugin/topNetCheckbox/topNetCheckbox.js"></script>

</body>
</html>
